import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaTableEditable,
    WeaBrowser,
    WeaSelect,
    WeaCheckbox,
    WeaInput,
} from "ecCom";
import {WeaSwitch} from 'comsMobx';
import {Button} from "antd";
import _ from 'lodash';
import LanguageConstant from '../../constant/LanguageConstant.js';

const {getLabel} = WeaLocaleProvider;

/**
 * 合同命名规则组件
 */
@inject("contractNameRuleStore")
@observer
class ContractNameRuleComponent extends Component {

    componentDidMount() {
        const {contractNameRuleStore, settingId, isDefault} = this.props;
        contractNameRuleStore.init({settingId, isDefault});
        if (settingId > 0) {
            contractNameRuleStore.getNameRulesTableDatas();
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const {contractNameRuleStore} = this.props;
        const {settingId, isDefault} = nextProps;
        contractNameRuleStore.init({settingId, isDefault});
        if (settingId > 0) {
            contractNameRuleStore.getNameRulesTableDatas();
        }
    }


    render() {
        return (
            <div className="contract-name-rule">
                {
                    this.renderEditableTable()
                }
            </div>
        );
    }


    /**
     * 渲染编辑表格
     */
    renderEditableTable = () => {
        const {contractNameRuleStore} = this.props;
        const {nameRules, willAddNameRule, willDeleteNameRule, onNameRuleChange} = contractNameRuleStore;
        const datas = toJS(nameRules);
        return (
            <WeaTableEditable
                rowKey="id"
                draggable={true}
                buttonsType='inline'
                columns={this.getTableColums()}
                datas={datas}
                initialDatas={datas}
                willAdd={willAddNameRule}
                willDelete={willDeleteNameRule}
                onChange={data => {
                    onNameRuleChange(data);
                }}
                showCopy={false}
            />
        );
    }

    getTableColums = () => {
        const {contractNameRuleStore} = this.props;
        const {selectOptions} = contractNameRuleStore;
        const {workflowFields, nameRuleType} = selectOptions;
        const nameRuleTypeOptions = toJS(nameRuleType);
        const workflowFieldsTypeOptions = toJS(workflowFields);
        const columns = [{
            title: getLabel(LanguageConstant.TYPE, "类型"),
            dataIndex: "type",
            width: "30%",
            com: [
                {
                    type: "CUSTOM",
                    key: "type",
                    render: (text, record, index, onEdit) => {
                        const type = record.type == undefined ? 0 : record.type;
                        return (
                            <WeaSelect
                                style={{width: "100%"}}
                                options={nameRuleTypeOptions}
                                viewAttr={3}
                                value={"" + type}
                                onChange={(value, showname) => {
                                    onEdit({
                                        type: 'CUSTOM',
                                        record: {
                                            ...record,
                                            type: value,
                                        },
                                        index,
                                    })
                                }}
                            />
                        );
                    }
                },
            ]
        }, {
            title: getLabel(LanguageConstant.OPTION, "选项"),
            dataIndex: "id",
            width: "65%",
            com: [
                {
                    type: "CUSTOM",
                    key: "id",
                    render: (text, record, index, onEdit) => {
                        let {type, charValue, intValue} = record;
                        charValue = (charValue == undefined) ? "" : charValue;
                        intValue = (intValue == undefined) ? "0" : intValue;
                        if (type == 1) {         // 字符串
                            return (
                                <WeaInput
                                    style={{width: "100%"}}
                                    viewAttr={2}
                                    value={charValue}
                                    onChange={(value, showname) => {
                                        onEdit({
                                            type: 'CUSTOM',
                                            record: {
                                                ...record,
                                                charValue: value,
                                                intValue: 0,
                                            },
                                            index,
                                        })
                                    }}
                                />
                            );
                        } else if (type == 2) { // 表单字段
                            return (
                                <WeaSelect
                                    style={{width: "100%"}}
                                    showSearch
                                    optionFilterProp="children"
                                    options={workflowFieldsTypeOptions}
                                    viewAttr={3}
                                    value={"" + intValue}
                                    onChange={(value, showname) => {
                                        onEdit({
                                            type: 'CUSTOM',
                                            record: {
                                                ...record,
                                                intValue: value,
                                                charValue: "",
                                            },
                                            index,
                                        })
                                    }}
                                />
                            );
                        } else if (type == 3) { // 当前日期
                            return (<span>当前日期</span>);
                        } else if (type == 4) { // 模板名称
                            return <span>模板名称</span>
                        }
                        return (<span></span>);
                    }
                },
            ]
        }];
        return columns;
    }

}

export default ContractNameRuleComponent;